<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷歌广告接入示例</title>
    
    <!-- Google AdSense 自动广告代码 -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX"
         crossorigin="anonymous"></script>
    
    <!-- 可选：Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
    </script>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        h1, h2 {
            color: #333;
        }
        
        .ad-container {
            margin: 30px 0;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            border: 2px dashed #ddd;
            text-align: center;
        }
        
        .ad-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .content-section {
            margin: 30px 0;
            padding: 20px;
            background: white;
            border-radius: 8px;
        }
        
        .code-block {
            background: #f4f4f4;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            border-left: 4px solid #4CAF50;
        }
        
        .step {
            margin: 20px 0;
            padding: 20px;
            background: #e8f5e8;
            border-radius: 8px;
            border-left: 4px solid #4CAF50;
        }
        
        .warning {
            background: #fff3cd;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #ffc107;
            margin: 20px 0;
        }
        
        .info {
            background: #d1ecf1;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #17a2b8;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 谷歌广告接入完整指南</h1>
        
        <div class="info">
            <strong>📌 注意：</strong> 此页面仅为演示目的，实际使用时请替换为您自己的AdSense发布商ID。
        </div>
        
        <!-- 横幅广告位 -->
        <div class="ad-container">
            <div class="ad-label">广告位 - 横幅广告 (728x90)</div>
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
                 data-ad-slot="XXXXXXXXXX"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
        </div>
        
        <div class="content-section">
            <h2>🎯 接入步骤</h2>
            
            <div class="step">
                <h3>步骤1：申请AdSense账户</h3>
                <p>访问 <a href="https://www.google.com/adsense/">Google AdSense官网</a> 申请账户</p>
                <ul>
                    <li>使用Google账户登录</li>
                    <li>填写网站信息</li>
                    <li>等待审核通过</li>
                </ul>
            </div>
            
            <div class="step">
                <h3>步骤2：获取广告代码</h3>
                <p>在AdSense后台获取您的发布商ID和广告代码</p>
                <div class="code-block">
                    <pre>&lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX"
     crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
                </div>
            </div>
            
            <div class="step">
                <h3>步骤3：创建广告单元</h3>
                <p>在AdSense后台创建不同类型的广告单元</p>
                <ul>
                    <li><strong>展示广告</strong> - 横幅、矩形等</li>
                    <li><strong>信息流广告</strong> - 融入内容的广告</li>
                    <li><strong>搜索广告</strong> - 搜索结果页广告</li>
                </ul>
            </div>
        </div>
        
        <!-- 矩形广告位 -->
        <div class="ad-container">
            <div class="ad-label">广告位 - 矩形广告 (300x250)</div>
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
                 data-ad-slot="XXXXXXXXXX"
                 data-ad-format="rectangle"
                 data-full-width-responsive="true"></ins>
        </div>
        
        <div class="content-section">
            <h2>💡 广告类型与代码示例</h2>
            
            <h3>1. 自动广告（推荐）</h3>
            <div class="code-block">
                <pre>&lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX"
     crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
            </div>
            
            <h3>2. 展示广告</h3>
            <div class="code-block">
                <pre>&lt;ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"&gt;&lt;/ins&gt;
&lt;script&gt;
     (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;</pre>
            </div>
            
            <h3>3. 信息流广告</h3>
            <div class="code-block">
                <pre>&lt;ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="XXXXXX+XXXXXX+XXXXXX"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"&gt;&lt;/ins&gt;
&lt;script&gt;
     (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;</pre>
            </div>
        </div>
        
        <div class="content-section">
            <h2>⚙️ 优化建议</h2>
            
            <h3>📊 广告位置优化</h3>
            <ul>
                <li><strong>页面顶部</strong> - 横幅广告效果好</li>
                <li><strong>内容中间</strong> - 信息流广告自然融入</li>
                <li><strong>侧边栏</strong> - 矩形广告常驻显示</li>
                <li><strong>页面底部</strong> - 移动端效果佳</li>
            </ul>
            
            <h3>📱 响应式设计</h3>
            <div class="code-block">
                <pre>/* CSS for responsive ads */
.adsbygoogle {
    display: block;
    margin: 20px auto;
    text-align: center;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .adsbygoogle {
        width: 100%;
        height: auto;
    }
}</pre>
            </div>
        </div>
        
        <!-- 信息流广告位 -->
        <div class="ad-container">
            <div class="ad-label">广告位 - 信息流广告</div>
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="XXXXXX+XXXXXX+XXXXXX"
                 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
                 data-ad-slot="XXXXXXXXXX"></ins>
        </div>
        
        <div class="content-section">
            <h2>🔧 实际部署代码</h2>
            
            <h3>HTML结构</h3>
            <div class="code-block">
                <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;您的网站标题&lt;/title&gt;
    
    &lt;!-- Google AdSense 自动广告 --&gt;
    &lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX"
         crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 页面内容 --&gt;
    &lt;main&gt;
        &lt;!-- 广告位 --&gt;
        &lt;div class="ad-container"&gt;
            &lt;ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
                 data-ad-slot="XXXXXXXXXX"
                 data-ad-format="auto"
                 data-full-width-responsive="true"&gt;&lt;/ins&gt;
            &lt;script&gt;
                 (adsbygoogle = window.adsbygoogle || []).push({});
            &lt;/script&gt;
        &lt;/div&gt;
    &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
            </div>
            
            <h3>JavaScript动态加载</h3>
            <div class="code-block">
                <pre>// 动态加载AdSense
function loadAdSense() {
    const script = document.createElement('script');
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX';
    script.async = true;
    script.crossOrigin = 'anonymous';
    document.head.appendChild(script);
}

// 页面加载完成后加载广告
window.addEventListener('load', loadAdSense);

// 初始化广告
function initAds() {
    (adsbygoogle = window.adsbygoogle || []).push({});
}

// 延迟加载广告（性能优化）
setTimeout(initAds, 1000);</pre>
            </div>
        </div>
        
        <div class="warning">
            <strong>⚠️ 重要提醒：</strong>
            <ul>
                <li>请将 <code>ca-pub-XXXXXXXXXXXXXXXXX</code> 替换为您的真实发布商ID</li>
                <li>将 <code>XXXXXXXXXX</code> 替换为您的广告单元ID</li>
                <li>确保网站内容符合AdSense政策</li>
                <li>不要点击自己的广告，避免账户被封</li>
            </ul>
        </div>
        
        <div class="content-section">
            <h2>📈 性能优化</h2>
            
            <h3>1. 延迟加载</h3>
            <div class="code-block">
                <pre>// 延迟加载广告脚本
function loadAdSenseLazy() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const script = document.createElement('script');
                script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXX';
                script.async = true;
                document.head.appendChild(script);
                observer.unobserve(entry.target);
            }
        });
    });
    
    document.querySelectorAll('.adsbygoogle').forEach(ad => {
        observer.observe(ad);
    });
}</pre>
            </div>
            
            <h3>2. 错误处理</h3>
            <div class="code-block">
                <pre>// 广告加载错误处理
window.addEventListener('error', (e) => {
    if (e.target.src && e.target.src.includes('googlesyndication.com')) {
        console.warn('AdSense 加载失败，可能被广告拦截器阻止');
        // 可以显示替代内容或提示用户
    }
});

// 检查广告拦截器
function checkAdBlocker() {
    const testAd = document.createElement('div');
    testAd.innerHTML = '&nbsp;';
    testAd.className = 'adsbox';
    testAd.style.position = 'absolute';
    testAd.style.left = '-9999px';
    document.body.appendChild(testAd);
    
    setTimeout(() => {
        if (testAd.offsetHeight === 0) {
            console.warn('检测到广告拦截器');
            // 显示提示信息
        }
        document.body.removeChild(testAd);
    }, 100);
}</pre>
            </div>
        </div>
    </div>
    
    <!-- 底部广告位 -->
    <div class="ad-container">
        <div class="ad-label">广告位 - 底部广告</div>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
             data-ad-slot="XXXXXXXXXX"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
    </div>
    
    <!-- 初始化广告 -->
    <script>
        // 模拟广告初始化（实际使用时需要真实的AdSense代码）
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面已加载，广告初始化中...');
            
            // 注意：这里只是演示，实际使用时需要：
            // (adsbygoogle = window.adsbygoogle || []).push({});
            
            // 添加广告位样式
            const ads = document.querySelectorAll('.adsbygoogle');
            ads.forEach(ad => {
                ad.style.minHeight = '100px';
                ad.style.background = '#f0f0f0';
                ad.style.display = 'flex';
                ad.style.alignItems = 'center';
                ad.style.justifyContent = 'center';
                ad.style.color = '#666';
                ad.innerHTML = '广告位 (实际使用时将显示真实广告)';
            });
        });
    </script>
</body>
</html> 